<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element.js"></script>
    <style>
        .my_img {
            width: 150px;
            height: 150px;
            margin-left: 88px;
            border: 1px dashed #888888;
            border-radius: 10px;
        }
        .my_img:hover{
            border: 1px dashed rgb(64, 158, 255);
            border-radius: 10px;
        }
        .my_img img{
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="box">
    <div><h2>用户详情</h2></div>
    <!--  个人中心-->
    <div class="my_img">
        <img :src="avatarUrl" height="188" width="188" @click="change"><br>
        <input type="file" id="file" style="display: none" @change="handleFileChange" accept="image/*">
        <b>被关注数：52</b><br>
        <b style="margin-top: 20px">被看数：1168</b>
    </div>
    <!--  用户名-->
    <div style="margin-top: 150px;margin-left: 85px">
        <span>用户名</span>
        <el-input
                style="width: 888px;margin-left: 20px"
                placeholder="中通电力"
                v-model="input"
                :disabled="true">
        </el-input>
    </div>
    <!--真实姓名-->
    <div style="margin-top: 20px;margin-left: 72px">
        <span>真实姓名</span>
        <el-input v-model="input01" placeholder="中通电力" style="width: 888px;margin-left: 20px"
                  :disabled="true"></el-input>
    </div>
    <!--    所属部门-->
    <div style="margin-top: 20px;margin-left: 72px">
        <span>所属部门</span>
        <el-input v-model="input01" placeholder="研发部" style="width: 888px;margin-left: 20px"
                  :disabled="true"></el-input>
    </div>
    <!--    电话-->
    <div style="margin-top: 20px;margin-left: 103px">
        <span>电话</span>
        <el-input v-model="input02" placeholder="020-12345678" style="width: 888px;margin-left: 20px"
                  :disabled="true"></el-input>
    </div>
    <!--    年龄-->
    <div style="margin-top: 20px;margin-left: 103px">
        <span>年龄</span>
        <el-input v-model="input03" placeholder="20" style="width: 888px;margin-left: 20px" :disabled="true"></el-input>
    </div>
    <!--    性别选择-->
    <div style="margin-top: 20px;margin-left: 103px">
        <span>性别</span>
        <template>
            <el-radio v-model="radio" label="1" style="margin-left: 20px" :disabled="true">男</el-radio>
            <el-radio v-model="radio" label="2" :disabled="true">女</el-radio>
        </template>
    </div>
    <!--    注册时间-->
    <div style="margin-top: 20px;margin-left: 72px">
        <span>注册时间</span>
        <el-input
                style="width: 888px;margin-left: 20px"
                placeholder=""
                v-model="input04"
                :disabled="true">
        </el-input>
    </div>
    <!--    登陆时间-->
    <div style="margin-top: 20px;margin-left: 72px">
        <span>登录时间</span>
        <el-input
                style="width: 888px;margin-left: 20px"
                placeholder=""
                v-model="input05"
                :disabled="true">
        </el-input>
    </div>
    <!--    是否私密-->
    <div style="margin-top: 20px;margin-left: 72px">
        <template>
            <!-- `checked` 为 true 或 false -->
            <el-checkbox v-model="checked" :disabled="true">是否私密</el-checkbox>
        </template>
    </div>
</div>

<script>
    new Vue({
        el: '#box',
        data() {
            return {
                input: '',
                input01: '',
                value: '',
                input02: '',
                input03: '',
                radio: '1',
                input04: '2025-1-1 09：30：00',
                input05: '2025-1-1 09：32：00',
                checked: false,
                avatarUrl: './img/img.png',
                options: [{
                    value: '选项1',
                    label: '研发部'
                }, {
                    value: '选项2',
                    label: '销售部'
                }, {
                    value: '选项3',
                    label: '财务部'
                }],
            }
        },
        methods: {
            preserve() {
                location.reload();
            },
            change() {
                document.getElementById("file").click();
            },
            handleFileChange(event) {
                //获取
                const file = event.target.files[0];
                if (!file) return;

                // 检查是否为图片文件
                if (!file.type.startsWith('image/')) {
                    this.$message.error('请选择图片文件');
                    return;
                }

                // 检查文件大小（示例：限制不超过5MB）
                const maxSize = 5 * 1024 * 1024; // 5MB
                if (file.size > maxSize) {
                    this.$message.error('图片大小不能超过5MB');
                    return;
                }

                // 读取图片并更新头像
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.avatarUrl = e.target.result;
                    this.$message.success('头像已更新');
                };
                reader.readAsDataURL(file);
            }
        }
    })
</script>

</body>
</html>